<template>
  <view class="viewport">
    <wd-navbar
      :bordered="false"
      placeholder
      safeAreaInsetTop
      left-arrow
      custom-style="background-color:#92beab;"
      custom-class="color:#fff"
    >
      <template #title>
        <view class="custom-title-style">常见问题</view>
      </template>
      <template #capsule>
        <wd-navbar-capsule @back="handleBack" @back-home="handleBackHome" />
      </template>
    </wd-navbar>
    <view class="help">
      <view class="help-top">
        <image src="@/static/1x/help.png" mode="scaleToFill" class="help-top" />
      </view>
      <view class="help-content">
        <view class="help-content-top">
          <uni-section title="热门问题">
            <uni-collapse>
              <uni-collapse-item
                title="如何批量上传衣物照片?"
                :show-animation="true"
              >
                <view class="content">
                  <text class="text"
                    >目前暂不支持批量上传功能。
                    用户需逐一拍摄或从相册选择衣物照片进行上传。
                    您可以提前整理好衣物照片在相册中的位置，按顺序上传，
                    以提高上传效率。后续我们会根据用户需求评估是否开发批量上传功能。</text
                  >
                </view>
              </uni-collapse-item>
              <uni-collapse-item title="可以分享自己的穿搭方案给好友吗?">
                <view class="content">
                  <text class="text"
                    >可以的。在您搭配好一套穿搭后，点击穿搭页面的分享按钮，
                    可选择通过微信、Q0等社交平台分享给好友，
                    也可以生成图片保存至相册后再进行分享，方便您与好友交流穿搭心得。</text
                  >
                </view>
              </uni-collapse-item>
              <uni-collapse-item title="如何删除已上传的衣物照片?">
                <view class="content">
                  <text class="text"
                    >可以的。在您搭配好一套穿搭后，点击穿搭页面的分享按钮，
                    可选择通过微信、Q0等社交平台分享给好友，
                    也可以生成图片保存至相册后再进行分享，方便您与好友交流穿搭心得。</text
                  >
                </view>
              </uni-collapse-item>
              <uni-collapse-item title="能根据天气推荐穿搭吗?">
                <view class="content">
                  <text class="text"
                    >可以的。在您搭配好一套穿搭后，点击穿搭页面的分享按钮，
                    可选择通过微信、Q0等社交平台分享给好友，
                    也可以生成图片保存至相册后再进行分享，方便您与好友交流穿搭心得。</text
                  >
                </view>
              </uni-collapse-item>
              <uni-collapse-item title="如何添加衣物的品牌信息?">
                <view class="content">
                  <text class="text"
                    >可以的。在您搭配好一套穿搭后，点击穿搭页面的分享按钮，
                    可选择通过微信、Q0等社交平台分享给好友，
                    也可以生成图片保存至相册后再进行分享，方便您与好友交流穿搭心得。</text
                  >
                </view>
              </uni-collapse-item>
            </uni-collapse>
          </uni-section>
        </view>
      </view>
    </view>
  </view>
</template>

<script setup lang="ts">
import { onLoad } from "@dcloudio/uni-app";
const handleBack = () => {
  uni.navigateBack({});
};
const handleBackHome = () => {
  uni.reLaunch({
    url: "/pages/index/index",
  });
};
onLoad(() => {});
</script>

<style lang="scss">
page {
  height: 100%;
  width: 100%;
  //   overflow: hidden;
  background-color: rgb(211, 231, 222);
}

.help {
  display: flex;
  margin: 0 40rpx;
  flex-direction: column;
  overflow-y: auto;
  .help-top {
    height: 350rpx;
    width: 100%;
  }

  .help-content {
    flex: 1;
    display: flex;
    background-color: #fff;
    height: 100%;
    flex-direction: column;

    .help-content-top {
    }
  }
}

.example-body {
  flex-direction: column;
  flex: 1;
}

.content {
  padding: 15px;
}

.text {
  font-size: 14px;
  color: #bdbbbb;
  line-height: 20px;
}
</style>
